<template>
  <view class="container">
    <!-- 头像 设置 -->
    <view class="header">
      <u-status-bar></u-status-bar>
      <view style="height: 180rpx"></view>
      <!-- <u-image :src="require('@/static/public/bg.png')" width="100vw" height="200rpx"></u-image> -->
      <!-- 头像 -->
      <view class="avatar" @click="toPersonCenter">
        <!-- 				<u-avatar style="margin-right:24rpx" :src="avatar ? avatar : 'https://res.jiyaqi.com/pet/miniapp'" size="72rpx" mode="aspectFill"></u-avatar> -->
        <u--image
          style="margin-right: 24rpx"
          width="104rpx"
          height="104rpx"
          radius="24rpx"
          :src="avatar ? avatar : '/static/user/avatar.png'"
        ></u--image>
        <!-- https://jzyhmall.oss-cn-hangzhou.aliyuncs.com/ma/img/8DEWU5ZD9QArLrhG0MpOphdbNw8Gc3db.jpeg -->
        <view class="" style="margin-left: 24rpx">
          <view class="avatarName">{{ token ? name : "未登录" }}</view>
          <!-- <view class="withDay" v-if="withDay">加入{{ withDay }} 天啦</view> -->
        </view>
      </view>
      <!-- 设置 -->
      <!-- <view class="setting iconfont icon-navbar_setting" @click="toPage('set/set')" style="color:'#1A1A1A'"></view> -->
    </view>
    <!--  -->
    <!-- <view class="cell" v-if="token">
      <view
        class="cell-item tableTop"
        @click="toPage(`appUser/collectionCentre`)"
      >
        <view class="num">{{ favoriteNumber || 0 }}</view>
        <view class="name">收藏</view>
      </view>
      <view class="cell-item attention" @click="toPage('appUser/follow')">
        <view class="num">{{
          userCount ? userCount.followCount - petFriendNumber : 0
        }}</view>
        <view class="name">关注</view>
      </view>
      <view class="cell-item attention" @click="goUserCoupon()">
        <view class="num">{{ userCount ? discountNUmber : 0 }}</view>
        <view class="name">优惠券</view>
      </view>
    </view> -->

    <view class="application">
      <view class="top">
        <view class="name">我的订单</view>
        <view class="tool" @click="toPage(orderPath+'-1')">
          <text>全部</text>
          <text class="rotateZ iconfont icon-more1"></text>
        </view>
      </view>
      <view class="order-tool">
        <view class="item" @click="toPage(orderPath+'0')">
          <view>
            <u--image
              width="48rpx"
              height="48rpx"
              :src="'/static/user/dfk.png'"
            ></u--image>
          </view>
          <text>待付款</text>
        </view>
        <view class="item" @click="toPage(orderPath+'1')">
          <view>
            <u--image
              width="48rpx"
              height="48rpx"
              :src="'/static/user/dfh.png'"
            ></u--image>
          </view>
          <text>待发货</text>
        </view>
        <view class="item" @click="toPage(orderPath+'2')">
          <view>
            <u--image
              width="48rpx"
              height="48rpx"
              :src="'/static/user/dsh.png'"
            ></u--image>
          </view>
          <text>待收货</text>
        </view>
        <view class="item" @click="toPage(orderPath+'4')">
          <view>
            <u--image
              width="48rpx"
              height="48rpx"
              :src="'/static/user/dfk.png'"
            ></u--image>
          </view>
          <text>退款/售后</text>
        </view>
      </view>
    </view>

    <!-- 分销 -->
    <view class="application">
      <view
        class="application-item"
        v-for="(item, index) in commonList3"
        :key="index"
        @click="toPage(item.pagePath)"
      >
        <u--image
          :showLoading="true"
          :src="item.url"
          width="48rpx"
          height="48rpx"
        ></u--image>
        <view class="application-item-b">
          <text class="txt">{{ item.name }}</text>
          <text class="rotateZ iconfont icon-more1"></text>
        </view>
      </view>
    </view>
    <!-- 服务、问诊 -->
    <!-- <view class="application">
      <view
        class="application-item"
        v-for="(item, index) in commonList0"
        :key="index"
        @click="toPage(item.pagePath)"
      >
        <u--image
          :showLoading="true"
          :src="item.url"
          width="48rpx"
          height="48rpx"
        ></u--image>
        <view class="application-item-b">
          <text class="txt">{{ item.name }}</text>
          <text class="rotateZ iconfont icon-more1"></text>
        </view>
      </view>
    </view> -->



    <view class="application">
      <button class="application-item kefu-btn" open-type="contact">
        <u--image
          :showLoading="true"
          :src="'/static/user/kf.png'"
          width="48rpx"
          height="48rpx"
        ></u--image>
        <view class="application-item-b">
          <text class="txt">联系客服</text>
          <text class="rotateZ iconfont icon-more1"></text>
        </view>
      </button>
      <view
        class="application-item"
        v-for="(item, index) in commonList2"
        :key="index"
        @click="handleMenu(item)"
      >
        <u--image
          :showLoading="true"
          :src="item.url"
          width="48rpx"
          height="48rpx"
        ></u--image>
        <view class="application-item-b">
          <text class="txt">{{ item.name }}</text>
          <text class="rotateZ iconfont icon-more1"></text>
        </view>
      </view>
      <!-- <button
        open-type="contact"
        ref="contactBtn"
        style="position: absolute; opacity: 0; width: 1px; height: 1px;"
      ></button> -->
    </view>
  </view>
</template>
<script>
import { mapState, mapMutations,mapActions } from "vuex";
import pageMixin from "@/mixins/pageMixin";
// import { getOrderList } from "@/api/medical/medical.js";
import { followListApi, favoriteList } from "@/api/user/user.js";
import { getCouponsAll } from "@/api/user";
import { getInquiryPopList } from "@/api/home/home";
import cookie from '@/utils/store/cookie'
import store from '@/store'
export default {
  mixins: [pageMixin],
  components: {},
  data() {
    return {
      favoriteNumber: 0, // 收藏的数量
      discountNUmber: 0, // 优惠券的数量
      petFriendNumber: 0,
      inquiryNumber: 0, // 问诊兑换券
      orderTotal: 0,
      orderPath:"/packageShop/pages/order/MyOrder/index?type=",
      tabList: [
        {
          num: 0,
          name: "圈态",
          pagePath: "circle/personCenter",
        },
        {
          num: 0,
          name: "常识",
          pagePath: "circle/personCenter",
        },
        {
          num: 0,
          name: "关注",
          pagePath: "message/follow/index",
        },
        {
          num: 0,
          name: "粉丝",
          pagePath: "message/fans/index",
        },
      ],
      commonList0: [
        {
          name: "我的积分",
          url: "https://res.jiyaqi.com/mall/2023/11/7/36ba5bd11611425faec3b71dabfca042.png",
          pagePath: "/packageShop/pages/user/signIn/Integral/index?state=2",
        },
        {
          name: "商品订单",
          url: "https://res.jiyaqi.com/mall/2023/11/7/eb95588c9ede4b3287390db16829eb16.png",
          pagePath: "/packageShop/pages/order/MyOrder/index",
        },
      ],
      commonList2: [
        // {
        //   name: "联系客服",
        //   url:"/static/user/kf.png",
        //   pagePath: "",
        // },
        {
          name: "设置",
          url: "https://res.jiyaqi.com/mall/2023/11/7/f2ea8acd97f74636862c3538ff9cc1b0.png",
          pagePath: "set/set",
        },
      ],
      commonList3: [
        {
          name: "我的分销",
          url: "https://res.jiyaqi.com/mall/icon/distributionPin.png",
          pagePath: "user/promotion/UserPromotion/index",
        },
        {
          name: "我的优惠券",
          url: "/static/user/coupons.png",
          pagePath: "user/coupon/UserCoupon/index",
        },
        {
          name: "收货地址",
          //url: "https://res.jiyaqi.com/mall/2023/11/7/9d8c19cbcf6f4cada91e9004b09ccd4a.png",
          url:"/static/user/address.png",
          pagePath: "address/address",
        },
      ],
    };
  },
  filters: {
    jsBirthday(birthday) {
      if (birthday) {
        let str = birthday;
        birthday = birthday.split("-");
        // 新建日期对象
        let date = new Date();
        // 今天日期，数组，同 birthday
        let today = [date.getFullYear(), date.getMonth() + 1, date.getDate()];
        // 分别计算年月日差值
        let age = today.map((val, index) => {
          return val - birthday[index];
        });
        // 当天数为负数时，月减 1，天数加本月总天数
        if (age[2] < 0) {
          // 获取当月总天数的方法
          let curMonth = new Date(today[0], today[1], 0);
          age[1]--;
          age[2] += curMonth.getDate();
        }
        // 当月数为负数时，年减 1，月数加上 12
        if (age[1] < 0) {
          age[0]--;
          age[1] += 12;
        }
        if (age[0]) return age[0] + "岁" + age[1] + "月";
        else return "刚出生" + age[2] + "天";
      }
    },
  },

  onShow() {
    // 模拟退出
    // uni.setStorageSync('Token', '')
	  // this.SET_TOKEN('')

    // if (this.token && !this.petList) {
    //   this.getPetList();
    // }
    // // 圈态数量
    // if (this.token) {
    //   this.getTaIndex();
    //   this.getScore();

    //   this.getOrderList(); // 进行中的问诊订单
    //   this.followListApi();
    // }
  },
  computed: {
    ...mapState("user", [
      "name",
      "avatar",
      "token",
      "score",
      "UserInfo",
      "petList",
      "userCount",
    ]),
    // 计算距离陪伴天数
    withDay() {
      console.log("token="+this.token)
      console.log(this.name)
      if (!this.UserInfo) return 0;
      let time = new Date().getTime();
      let oldTime = new Date(this.UserInfo.createTime).getTime();
      let day = Math.round((time - oldTime) / (3600 * 24 * 1000));
      return day;
    },
  },
  methods: {
    ...mapMutations('user', [
      'SET_TOKEN'
    ]),
    ...mapActions("user", ["getPetList", "getUserCount", "getScore"]),
    handleCreateTime(time) {
      var day = document.getElementById("day");
      var hour = document.getElementById("hour");
      var minute = document.getElementById("minute");
      var second = document.getElementById("second");
    },
    followListApi() {
      let params = {
        targetType: 1, // targetType  ==3 医院     targetType  ==2 医院  targetType  ==1 宠友
        pageEnable: 0,
      };
      followListApi(params).then((res) => {
        console.log("res宠友", res);
        if (res) this.petFriendNumber = res.total || 0;
      });

      // 请求优惠券的接口
      // let type = 0
      getCouponsAll({
        usedFlag: 0,
      }).then((res) => {
        this.discountNUmber = res.length;
      });
      favoriteList({
        searchValue: "",
        pageEnable: 1, //是否需要分页,0:不分页,1:分页
        pageNum: 1,
        pageSize: 1,
      }).then((res) => {
        if (res) this.favoriteNumber = res.total || 0;
      });
      getInquiryPopList({
        status: 0,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        if (res) this.inquiryNumber = res.total || 0;
      });
    },
    getOrderList() {
      let params = {
        orderType: 1, //订单状态:0待付款，1进行中，2待评价，3已完成   4.退款/售后
        pageSize: 15,
        pageEnable: 1,
        pageNum: 1,
        userId: this.UserInfo.id,
      };
      // getOrderList(params).then((res) => {
      //   if (res) this.orderTotal = res.total || 0;
      // });
    },
    handleMenu(item){
      if(item.name != '联系客服'){
        this.toPage(item.pagePath)
      }
    },
    createHiddenButton() {
      const button = document.createElement('button');
      button.setAttribute('open-type', 'contact');
      button.style.display = 'none';
      document.body.appendChild(button);
      button.click();
      setTimeout(() => {
        document.body.removeChild(button);
      }, 100);
    },
    toPersonCenter() {
      if (!this.token) {
        // this.toPage('authorization/index', false);
        uni.navigateTo({
          url: "/packageAuth/pages/authorization/index",
        });
      } else {
      }

      // if (this.UserInfo) this.toPage(`circle/personCenter?userId=${this.UserInfo.id}`);
      // else this.toPage(`circle/personCenter`);
    },
    getTaIndex() {
      if (!this.UserInfo || !this.UserInfo.id) return;
      this.$nextTick(() => {
        console.log(1);
        this.getUserCount(this.UserInfo.id);
        // getTaIndex({ indexUserId: this.UserInfo.id }).then(res => {
        //   this.TaIndexData = res;
        //   this.tabList[0].num = res.circleCount;
        //   this.tabList[1].num = res.commonSenseCount;
        //   this.tabList[2].num = res.followCount;
        //   this.tabList[3].num = res.fansCount;
        // });
      });
    },
    goUserCoupon() {
      this.toPage("user/coupon/UserCoupon/index");
    },
    goInquiryCoupon() {
      this.toPage("user/coupon/UserCoupon/inquiry");
    },
  },
  mounted() {
    console.log(this.userInfo)
    console.log(store)
  }
};
</script>
<style lang="scss" scoped>
page {
  background: #f5f7fa;
}

::v-deep uni-swiper .uni-swiper-dot {
  width: 10rpx;
  height: 10rpx;
}

::v-deep uni-swiper .uni-swiper-dots-horizontal {
  bottom: 14rpx;
}

.mr12 {
  margin-right: 12rpx !important;
}

.mt16 {
  margin-top: 16rpx;
}

.f48 {
  font-size: 48rpx;
}

.addBtn {
  box-sizing: border-box;
  margin: 60rpx auto;
  width: 160rpx;
  height: 56rpx;
  background: rgba($color: #ffffff, $alpha: 0.9);
  border-radius: 40rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
}

.container {
  width: 100vw;
  overflow: auto;

  background: url("https://jzyhmall.oss-cn-hangzhou.aliyuncs.com/ma/img/bg1753.jpg") no-repeat;
  background-size: 100% 300rpx;
  background-position: top;

  .header {
    position: relative;

    .shade {
      z-index: 2;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba($color: #000000, $alpha: 0.3);
    }

    .setting {
      z-index: 3;
      position: absolute;
      bottom: 32rpx;
      right: 37rpx;

      font-size: 48rpx;
    }

    .avatar {
      z-index: 3;
      position: absolute;
      bottom: 20rpx;
      left: 24rpx;
      display: flex;
      align-items: center;
      font-size: 36rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;

      .avatarName {
        color: #1a1a1a;
      }
    }
  }

  .pet {
    margin: 92rpx 24rpx 16rpx;
    margin-top: 0;
    padding: 24rpx;
    border-radius: 20rpx;
    background: #ffffff;

    &-head {
      margin: 8rpx 0 32rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .t {
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1a1a1a;
        line-height: 32rpx;
      }

      .add {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1a1a1a;
        line-height: 28rpx;

        .f24 {
          margin-right: 14rpx;
          font-size: 24rpx;
        }
      }
    }

    .swiper {
      height: 268rpx;
      background: #f7f7f7;
      border-radius: 12rpx;

      .pet-avatar {
        padding: 24rpx;
        display: flex;
        justify-content: flex-start;
        position: relative;

        .valueData {
          position: absolute;
          top: 24rpx;
          right: 36rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .v2 {
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 36rpx;
          }
        }

        .right {
          flex: 1;
          margin-left: 24rpx;

          .name1 {
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;

            color: #999999;
            line-height: 30rpx;
          }

          .name2 {
            margin-bottom: 16rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 40rpx;
          }

          .identity2 {
            margin-bottom: 24rpx;
          }

          .squareType {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .squareType-l {
              .tt {
                border-radius: 4rpx;
                border: 1px solid #ff6010;
                padding: 1rpx 6rpx;
                display: inline-block;
                margin-right: 14rpx;
                font-size: 22rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ff6010;
                line-height: 30rpx;
              }
            }

            .squareType-r {
              display: flex;
              align-items: center;

              text {
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
                line-height: 26rpx;
              }
            }
          }
        }
      }
    }
  }

  .application {
    display: flex;
    flex-direction: column;
    margin: 16rpx 24rpx;
    border-radius: 20rpx;
    background: #ffffff;
    .top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16rpx 32rpx;
      .name{
        font-weight: 500;
        font-size: 28rpx;
        color: #1A1A1A;
        font-family: PingFangSC, PingFang SC;
      }
      .tool{
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 24rpx;
        color: #8F959E;
        gap: 5px;
        .iconfont {
          font-size: 24rpx;
        }
      }
    }
    .order-tool{
      display: flex;
      align-items: center;
      padding: 32rpx;
      .item{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text{
          margin-top: 20rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #1F2329;
          line-height: 24rpx;
        }
      }
    }

    &-item {
      display: flex;
      align-items: center;
      height: 104rpx;
      width: 100%;
      padding-left: 32rpx;

      &-b {
        padding: 36rpx 24rpx 36rpx 24rpx;
        flex: 1;
        display: flex;
        justify-content: space-between;
        border-bottom: 1rpx solid #e6e6e6;
        
        .rotateZ {
          font-size: 24rpx;
          color: #8F959E;
        }

        .txt {
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1a1a1a;
          line-height: 28rpx;
        }
      }

      &:last-child {
        .application-item-b {
          border-bottom: 0rpx;
        }
      }
    }
  }
  .kefu-btn{
    width: auto;
    margin: 0;
    font-size: 28rpx;
    padding: 0;
    padding-left: 32rpx;
    background: transparent;
    line-height: 28rpx;
  }
}

::v-deep .u-popup__content__close {
  padding: 15rpx;

  // background-color: pink;
}

.cell {
  display: flex;

  margin: 8rpx 24rpx 16rpx 24rpx;
  padding: 40rpx 0;
  width: 702rpx;
  height: 152rpx;
  border-radius: 20rpx;
  justify-content: space-around;
  background: #ffffff;

  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .num {
      font-size: 36rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1a1a1a;
      line-height: 36rpx;
    }

    .name {
      margin-top: 16rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 24rpx;
    }
  }
}

.inquiry {
  display: flex;
  align-items: center;

  .inquiry-left {
    display: flex;
    align-items: center;

    .underway {
      display: flex;
      align-items: center;

      text {
        line-height: 1 !important;
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        // line-height: 42px;
      }

      text:nth-child(2) {
        margin-left: 16rpx;
        margin-right: 24rpx;
        display: inline-block;
        width: 16rpx;
        height: 16rpx;
        background: #fa5151;
        border-radius: 50%;
      }
    }
  }
}

.theme {
  font-size: 30rpx !important;
}

.attention {
  width: 33%;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}

.tableTop {
  width: 33%;
}

.withDay {
  margin-top: 16rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 24rpx;
}
</style>
